<template>
  <scroll-view class="album_scroll_view" scroll-y @scrolltolower="handlerToLower">
    <!-- swiper 轮播图
          1 自动轮播：autoplay
          2 指示器：indicator-dots
          3 衔接轮播：circular
          4 swiper
              默认的高度：150px
          5 image 
              默认的宽度 320px => 基本样式中重置为 100%
              默认的高度 240px
          6 计算图片的宽度和高度的比例
          7 把图片的比例也写到 swiper 标签样式
          8 swiper-item
              100%
    -->
    <view class="album_swiper">
      <swiper autoplay="true" indicator-dots="true" circular="true">
        <swiper-item v-for="item in banner" :key="item.id">
          <image mode="widthFix" :src="item.thumb"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="album_list">
      <navigator class="album_item" v-for="item in album" :key="item.id" :url="`/pages/album/index?id=${item.id}`">
        <view class="album_img">
          <image mode="aspectFill" :src="item.cover"></image>
        </view>
        <view class="album_info">
          <view class="album_name">{{item.name}}</view>
          <view class="album_desc">{{item.desc}}</view>
          <view class="album_btn">
            <view class="album_attention">+ 关注</view>
          </view>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        params: {
          limit: 30,
          order: "new",
          skip: 0
        },
        // 轮播图数据
        banner: [],
        // 列表数据
        album: [],
        // 是否还有分页
        hasMore: true,
      }
    },
    methods: {
      getList() {
        this.request({
          url: "https://service.picasso.adesk.com/v1/wallpaper/album",
          data: this.params
        }).then(result => {
          /* console.log(result) */
          if (this.banner.length === 0) {
            this.banner = result.res.banner
          }
          if (result.res.album.length === 0) {
            this.hasMore = false
            uni.showToast({
              title: "没有更多数据了！",
              icon: "none"
            })
            return
          }
          this.album = [...this.album, ...result.res.album]
          // console.log(this.album)
        })
      },
      // 上拉加载-执行分页
      handlerToLower() {
        if (this.hasMore) {
          this.params.skip += this.params.limit
          this.getList()
        } else {
          uni.showToast({
            title: "没有数据了！",
            icon: "none"
          })
        }
      }
    },
    mounted() {
      uni.setNavigationBarTitle({
        title: "专辑"
      })
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .album_scroll_view {
    height: calc(100vh - 36px);

    .album_swiper {
      swiper {
        // 屏幕宽 750rpx
        height: calc(750rpx/2.25);

        image {
          height: 100%;
        }
      }
    }

    .album_list {
      padding: 10rpx;

      .album_item {
        padding: 10rpx 0;
        display: flex;
        border-bottom: 1rpx solid #ccc;

        .album_img {
          flex: 1;
          padding: 10rpx 10rpx 10rpx 0;

          image {
            width: 200rpx;
            height: 200rpx;
          }
        }

        .album_info {
          flex: 2;
          padding: 0 10rpx;
          overflow: hidden;

          .album_name {
            font-size: 30rpx;
            color: #000;
            padding: 10rpx 0;
          }

          .album_desc {
            padding: 10rpx 0;
            font-size: 24rpx;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .album_btn {
            padding: 10rpx;
            display: flex;
            justify-content: flex-end;

            .album_attention {
              color: $theme_font_color;
              border: 1rpx solid $theme_font_color;
              padding: 10rpx;
            }
          }
        }

      }
    }


  }
</style>
